<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组的扩展</title>
</head>
<body>
    <script>
        "use strict";
        /*
            1、扩展运算符

            含义：
                扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

                    console.log(...[1, 2, 3])
                    // 1 2 3

                    console.log(1, ...[2, 3, 4], 5)
                    // 1 2 3 4 5

                    [...document.querySelectorAll('div')]
                    // [<div>, <div>, <div>]

                该运算符主要用于函数调用。

                    function push(array, ...items) {
                        array.push(...items);
                    }

                    function add(x, y) {
                        return x + y;
                    }

                    const numbers = [4, 38];
                    add(...numbers) // 42
                
                上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。

                扩展运算符与正常的函数参数可以结合使用，非常灵活。

                    function f(v, w, x, y, z) { }
                    const args = [0, 1];
                    f(-1, ...args, 2, ...[3]);

                扩展运算符后面还可以放置表达式。

                    const arr = [
                        ...(x > 0 ? ['a'] : []),
                        'b',
                    ];
                
                如果扩展运算符后面是一个空数组，则不产生任何效果。

                    [...[], 1]
                    // [1]

                替代函数的 apply 方法：
                    由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

                    // ES5 的写法
                    function f(x, y, z) {
                        // ...
                    }
                    var args = [0, 1, 2];
                    f.apply(null, args);

                    // ES6的写法
                    function f(x, y, z) {
                        // ...
                    }
                    let args = [0, 1, 2];
                    f(...args);
                
                

        */
    </script>
</body>
</html>